﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Tap Effect</title>
</head>
<body>

<h1 id="tapEffect">TapEffect</h1>
<p>TapEffect is a custom dependency property that apply pointer up/down theme animation to an item or element when user taps on it. Developers can quickly apply the tap effect to any element that does not have built-in up/down effect.</p>
    <p>
        <img alt="Tap Effect" src="http://download-codeplex.sec.s-msft.com/Download?ProjectName=storeapplib&amp;DownloadId=552403" /></p>
<p><strong>Namespace </strong></p>
<p><code>StoreAppLib.Animations</code></p>
<p><strong>Using TapEffect</strong></p>
<p>To use TapEffect in your project, add the reference to StoreAppLib project or install StoreAppLib from Visual Studio &quot;Manage NuGet Packages&quot; tool.</p>
    <p>To apply TapEffect, add the following namespace reference to the page.</p>
<p><code><span style="color: blue; font-size: 9.5pt;" lang="EN">&lt;</span><span style="color: #a31515; font-size: 9.5pt;" lang="EN">Page </span><span style="color: red; font-size: 9.5pt;" lang="EN"><strong>xmlns</strong></span><strong><span style="color: blue; font-size: 9.5pt;" lang="EN">:</span></strong><strong><span style="color: red; font-size: 9.5pt;" lang="EN">storeApp</span></strong><strong><span style="color: red; font-size: 9.5pt;">Animation</span></strong><strong><span style="color: blue; font-size: 9.5pt;" lang="EN">="using:StoreAppLib.Animations"</span></strong><span style="color: blue; font-size: 9.5pt;"> ...</span></code></p>
<p>Following code shows the usage of the TapEffect.</p>
<p><code><span style="color: blue; font-size: 9.5pt;" lang="EN">&lt;</span><span style="color: #a31515; font-size: 9.5pt;" lang="EN">Grid</span><span style="color: red; font-size: 9.5pt;" lang="EN"> Width</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="200"</span><span style="color: black; font-size: 9.5pt;" lang="EN"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: red; font-size: 9.5pt;" lang="EN">Height</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="150"</span><span style="color: black; font-size: 9.5pt;" lang="EN"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: red; font-size: 9.5pt;" lang="EN">Background</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="DarkBlue"</span><span style="color: black; font-size: 9.5pt;" lang="EN"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: red; font-size: 9.5pt;" lang="EN"><strong>storeAppAnimation</strong></span><strong><span style="color: blue; font-size: 9.5pt;" lang="EN">:</span></strong><strong><span style="color: red; font-size: 9.5pt;" lang="EN">TapEffect.Enabled</span></strong><strong><span style="color: blue; font-size: 9.5pt;" lang="EN">="True"</span></strong><span style="color: blue; font-size: 9.5pt;" lang="EN">&gt;</span></code></p>
<p><code><span style="color: black; font-size: 9.5pt;" lang="EN">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: blue; font-size: 9.5pt;" lang="EN">&lt;</span><span style="color: #a31515; font-size: 9.5pt;" lang="EN">TextBlock</span><span style="color: red; font-size: 9.5pt;" lang="EN"> Text</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="Click Me"</span><span style="color: black; font-size: 9.5pt;" lang="EN"><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: red; font-size: 9.5pt;" lang="EN">FontSize</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="30"</span><span style="color: black; font-size: 9.5pt;" lang="EN"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: red; font-size: 9.5pt;" lang="EN">HorizontalAlignment</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="Center"</span><span style="color: black; font-size: 9.5pt;" lang="EN"> <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span style="color: red; font-size: 9.5pt;" lang="EN">VerticalAlignment</span><span style="color: blue; font-size: 9.5pt;" lang="EN">="Center" /&gt;</span></code></p>
<p><code><span style="color: blue; font-size: 9.5pt;" lang="EN">&lt;/</span><span style="color: #a31515; font-size: 9.5pt;" lang="EN">Grid</span><span style="color: blue; font-size: 9.5pt;" lang="EN">&gt;</span></code></p>

</body>
</html>
